<template>
    <Thumb :move="moveY" :ratio="props.ratioY" vertical :size="props.height"></Thumb>
    <Thumb :move="moveX" :ratio="props.ratioX" :size="props.width"></Thumb>
</template>

<script setup lang="ts">
import { watchEffect, ref, provide } from "vue";
import Thumb from "./thumb.vue"
import { key } from "./thumb"
import {GAP} from "./constants"
// 滚动条移动的位置
let moveX = ref(0)
let moveY = ref(0)


let props = defineProps({
    height: {
        type: Number,
        default: 0
    },
    ratioX:{
        type:Number,
        default:1
    },
    ratioY:{
        type:Number,
        default:1
    },
    width:{
        type:Number,
        default:0
    }
   
})



// 对外暴露以至于获取夫组件的高度
const handleScroll = (wrap: HTMLDivElement) => {
    if (wrap) {
        const offsetHeight = wrap.offsetHeight - GAP
        const offsetWidth = wrap.offsetWidth - GAP
            
        moveY.value = ((wrap.scrollTop * 100)/
        offsetHeight)* props.ratioY

        moveX.value = ((wrap.scrollLeft*100)/offsetWidth)
        *props.ratioX
        console.log(moveX.value,"offsetWidth")
        console.log(moveY.value, "offsetHeight")
    }
}

// 对外暴露方法
defineExpose({
    handleScroll
})




</script>

<style scoped></style>